<template>
    <div>
    <div style="background-color: white;overflow-y: scroll;padding-bottom: 100px">
        <div class="mui-flex" v-for="(item,index) in liebiaoinitialAr" style="height: 90px;
        border-bottom: 1px solid #e1e1e1;">
            <div class="cell3">
                <p class="voucher-title" >{{item.name}}</p>
                <p class="voucher-description" >{{item.description}}</p>
            </div>
            <div class="cell">
                <div class="number"></div>

                <VouvherSpiner :index="index" max="500" min="0" unit="1" :amounts=item.amounts  @getspinnernumer="getspinnernumer"  width="80px" height="30px" >{{item.amounts}}</VouvherSpiner>
            </div>
        </div>
        <div class="voucherbelowoselect-big">
            <p @click="combuttonClick" style="height: 100%;color: white;padding-top:0.3rem ;font-size: 0.3rem">确定</p>
            <!--<yd-button size="large" type="primary"@click.native="combuttonClick" style="background-color:#e9b778;color:white">确定</yd-button>-->
        </div>
    </div>
    </div>

</template>

<script>
    import VouvherSpiner from "@/components/vouvherSpiner.vue";
    import {userInfoData} from '../../globalVariables'

    export default {
        name: "voucherSelect",
        data() {
            return {

                liebiaoinitialAr:JSON.parse(localStorage.getItem('voucher')),

            }
        },
        components: {
            VouvherSpiner
        },
        methods:{
            getspinnernumer(data)
            {
                console.log(data);
                var newAr=[];
                newAr=JSON.parse(localStorage.getItem('voucher'));
                var dic={};
                dic=newAr[data.index];
                dic['amounts']=data.amounts;
                //新数据替换旧数据 把选择的数据替换列表的数据
                newAr.splice(data.index,1,dic);
                localStorage.setItem('voucher',JSON.stringify
                (newAr));

                console.log(JSON.parse(localStorage.getItem('voucher')));


            },
            combuttonClick()
            {
                var selectAr=JSON.parse(localStorage.getItem('voucher'));
                var newAr=[];
                for (var i=0;i<selectAr.length;i++)
                {
                    if (selectAr[i].amounts===0)
                    {

                    }else
                    {
                        newAr.push(selectAr[i]);
                    }
                }
                if (newAr.length===0)
                {
                    this.$dialog.toast({
                        mes: '所选商品数量为空！',
                        timeout: 1500
                    });
                }else
                {
                    localStorage.setItem('room',JSON.stringify(''));
                    localStorage.setItem('phone',JSON.stringify(JSON.parse(localStorage.getItem(userInfoData)).mobile));
                    localStorage.setItem('address',JSON.stringify
                    (JSON.parse(localStorage.getItem(userInfoData)).addr));
                    localStorage.setItem('voucher',JSON.stringify(newAr));
                    this.$router.replace({name: 'voucherOrder'});

                }
            }




    }

    }
</script>

<style scoped>

    .voucher-title {
        color: #464646;
        font-size: 1.2em;
        text-align: left;
        padding-left: 20px;
        padding-top: 15px;
        width: 100%;
    }

    .voucher-description {
        color: #b1b1b1;
        font-size: 1.2em;
        text-align: left;
        padding-left: 20px;
        width: 100%;
        padding-top: 10px;

    }
    .number {
        padding-right: 20px;
        padding-top: 20px;
    }
    .voucherbelowoselect-big
    {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #83d16f;
        height: 1rem;
    }

</style>